<wicket:panel>
	<div class="project-list card no-autofocus">
		<div class="card-body">
			<div class="d-flex mb-4">
				<form wicket:id="query" class="clearable-wrapper flex-grow-1">
					<div class="input-group">
						<input wicket:id="input" spellcheck="false" autocomplete="off" class="form-control" placeholder="Query/order projects">
						<span class="input-group-append">
							<button wicket:id="submit" type="submit" class="btn btn-outline-secondary btn-icon" title="Query"><wicket:svg href="magnify" class="icon"></wicket:svg></button>
						</span>
					</div>
				</form>
				<a wicket:id="addProject" class="btn btn-primary btn-icon flex-shrink-0 ml-3" title="Add project"><wicket:svg href="plus" class="icon"/></a>
			</div>
			<div class="operations mb-4">
				<a wicket:id="showSavedQueries" class="show-saved-queries text-gray d-inline-block mb-2 mr-4">
					<wicket:svg href="eye" class="icon"></wicket:svg> Show Saved Queries
				</a>
				<a wicket:id="saveQuery" class="save-query text-gray d-inline-block mb-2 mr-4">
					<wicket:svg href="save" class="icon"></wicket:svg> Save Query
				</a>
				<a wicket:id="operations" class="operations d-inline-block mb-2 mr-4 text-gray">
					<wicket:svg href="ellipsis-circle" class="icon"></wicket:svg> Operations
				</a>
				<a wicket:id="importProjects" class="import-projects d-inline-block mb-2 mr-4 text-gray">
					<wicket:svg href="import" class="icon"></wicket:svg> Import
				</a>
				<a wicket:id="orderBy" class="order-by text-gray d-inline-block mb-2 mr-4">
					<wicket:svg href="sort" class="icon"></wicket:svg> Order By
				</a>
				<span wicket:id="count" class="float-right text-gray"></span>
			</div>
			<div wicket:id="body">
				<div wicket:id="feedback"></div>
				<table wicket:id="projects" class="table"></table>
			</div>
		</div>
	</div>
	<wicket:fragment wicket:id="projectFrag">
		<div class="d-flex align-items-center flex-wrap row-gap-2 font-size-h5">
			<a wicket:id="path" class="mr-2">
				<img wicket:id="avatar"> 
				<span wicket:id="text"></span>
				<span wicket:id="deleteStatus" class="text-danger"></span>
			</a> 
			<span wicket:id="labels" class="mr-2"></span>
		</div>
		<div wicket:id="description" class="mt-1 font-size-sm text-muted"></div>
		<div class="d-flex flex-wrap project-summary">
			<div wicket:id="codeStats" class="code-stats mt-2 d-flex align-items-center flex-wrap mr-3"></div>
			<div wicket:id="pullRequestStats" class="pull-request-stats mt-2 d-flex align-items-center flex-wrap"></div>
		</div>
		<div class="d-flex flex-wrap project-summary">
			<div wicket:id="issueStats" class="issue-stats mt-2 d-flex align-items-center flex-wrap mr-3"></div>
			<div wicket:id="buildStats" class="build-stats mt-2 d-flex align-items-center flex-wrap mr-3"></div>
			<div wicket:id="packStats" class="pack-stats mt-2 d-flex align-items-center flex-wrap"></div>
		</div>
		<div wicket:id="noStorage" class="mt-2 font-italic">Storage not found</div>
		<div wicket:id="children" class="project-summary"></div>
	</wicket:fragment>
	<wicket:fragment wicket:id="childrenFrag">
		<div class="d-flex flex-nowrap align-items-center mt-2">
			<wicket:svg href="project" class="icon mr-1"/>
			<a wicket:id="toggle" class="toggle-children mr-1"><wicket:svg href="arrow" class="icon"/></a>
			<a wicket:id="link"><span wicket:id="label"></span></a>
		</div>
		<div wicket:id="tree" class="child-projects mt-2"></div>
	</wicket:fragment>
</wicket:panel>
